<template>
    <transition
        name="slide"
        mode="out-in"
    >
        <div
            id="edit-user"
            class="pageAbsolute content-common"
        >
            <content-header></content-header>
            <div class="content-info">
                <div class="content-info-container">
                    <div class="title">
                        {{ title }}
                    </div>
                    <div class="form-info">
                        <div class="through form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>文章标题</span>
                                </div>
                                <div class="input">
                                    <input
                                        v-model="articleInfo.title"
                                        type="text"
                                        placeholder="请输入文章标题"
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="through form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>文章简介</span>
                                </div>
                                <div class="input">
                                    <el-input
                                        v-model="articleInfo.synopsis"
                                        type="textarea"
                                        :autosize="{ minRows: 4, maxRows: 4}"
                                        placeholder="请输入文章简介"
                                    >
                                    </el-input>
                                </div>
                            </div>
                        </div>
                        <div class="through form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>文章类型</span>
                                </div>
                                <div class="input">
                                    <el-select
                                        v-model="articleInfo.type"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in typeOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="through form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>文章置顶</span>
                                </div>
                                <div class="input">
                                    <el-radio-group v-model="articleInfo.isTop">
                                        <el-radio :label="true">
                                            是
                                        </el-radio>
                                        <el-radio :label="false">
                                            否
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </div>
                        <div class="through form-list">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>特别推荐</span>
                                </div>
                                <div class="input">
                                    <el-radio-group v-model="articleInfo.isSpecialRecommend">
                                        <el-radio :label="true">
                                            是
                                        </el-radio>
                                        <el-radio :label="false">
                                            否
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </div>
                        <div class="form-list through">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>封面图</span>
                                </div>
                                <div class="input">
                                    <el-upload
                                        ref="elUpload"
                                        :action="uploadAction"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleSuccess"
                                        :limit="1"
                                        :file-list="fileList"
                                        class="upload"
                                    >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img
                                            width="100%"
                                            :src="dialogImageUrl"
                                            alt=""
                                        >
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                        <div class="form-list through">
                            <div class="form-item">
                                <div class="label">
                                    <span>*</span>
                                    <span>文章内容</span>
                                </div>
                                <div class="input editor">
                                    <Editor ref="Editor"></Editor>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import ContentHeader from 'cmpts/ContentHeader.vue';
    import Editor from './components/Editor';
    import { mapState, mapMutations } from 'vuex';
    import { searchType, addArticle, editArticle } from 'assets/js/api';
    import { HOST } from 'assets/js/config';
    export default {
        components: {
            ContentHeader,
            Editor
        },
        data () {
            return {
                from: '', // 什么方式进入 add or edit
                typeOptions: [], // 文章类型
                uploadAction: `${ HOST }/system/upload/coverImagesUpload`, // 封面图上传接口
                dialogImageUrl: '', // 预览时图片的地址
                dialogVisible: false // 预览时遮罩flag
            };
        },
        computed: {
            title () {
                return this.from === 'add' ? '添加文章' : '编辑文章';
            },
            fileList () {
                let fileList = [];
                if (this.from === 'edit') {
                    fileList.push({
                        url: this.articleInfo.coverImagesUrl
                    });
                }
                return fileList;
            },
            ...mapState([
                'articleInfo'
            ])
        },
        mounted () {
            this.from = this.$route.query.from;
            this.searchType();
            // 如果是修改文章的话，设置编辑器初始值为之前的内容
            if (this.from === 'edit') {
                this.$refs.Editor.setHtml(this.articleInfo.content, this.articleInfo.textContent);
            }
        },
        methods: {
            ...mapMutations({
                setArticleInfo: 'SET_ARTICLE_INFO'
            }),
            save () {
                // 获取富文本编辑器内容
                this.articleInfo.content = this.$refs.Editor.getEditContent();
                // 获取富文本编辑器纯文本内容
                this.articleInfo.textContent = this.$refs.Editor.getEditContentInnerText();
                if (this.from === 'add') {
                    this.addArticle();
                } else {
                    this.editArticle();
                }
            },
            /**
             * 添加文章
             */
            addArticle () {
                addArticle(this.articleInfo).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    // 清空输入输入的各种内容
                    this.cancel();
                    this.$refs.elUpload.clearFiles();
                    this.$refs.Editor.clearText();
                });
            },
            /**
             * 编辑文章
             */
            editArticle () {
                editArticle(this.articleInfo).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    // 修改之后自动返回列表页
                    this.cancel();
                    this.$router.go(-1);
                });
            },
            /**
             * 取消
             */
            cancel () {
                this.setArticleInfo({
                    isTop: false,
                    isSpecialRecommend: false
                });
            },
            /**
             * 封面图片的移除事件
             * @param {Object} 当前图片信息
             * @param {ARray} 已上传的所有图片信息
             */
            handleRemove (file, fileList) {
                console.log(file, fileList);
            },
            /**
             * 图片预览
             * @param {Object} file 当前图片信息
             */
            handlePictureCardPreview (file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            /**
             * 图片上传成功事件
             * @param {Object} 成功之后的返回信息
             * @param {Object} 当前图片信息
             * @param {ARray} 已上传的所有图片信息
             */
            handleSuccess (res, file, fileList) {
                let data = JSON.parse(file.response.data);
                this.articleInfo.coverImagesUrl = data.path;
            },
            /**
             * 查询文章类型
             */
            searchType () {
                searchType({}).then(res => {
                    if (!res.status) {
                        this.$message.info('文章类型获取失败');
                        return;
                    }
                    let result = res.data.map(item => {
                        item.label = item.typeName;
                        item.value = item.typeName;
                        return item;
                    });
                    this.typeOptions = result;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/contentCommon';
/deep/.el-radio-group {
    display: flex;
    align-items: center;
}
/deep/.el-input--suffix .el-input__inner, /deep/.el-radio-group,/deep/.el-textarea__inner {
    padding-left: 10px;
}
/deep/.el-textarea__inner {
    resize: none;
    border: none;
    border-radius: 0;
    font-size: 12px;
    color: #222;
    &:focus {
        border: 1px solid #4CBDA9;
    }
}
/deep/.w-e-text-container {
    min-height: 300px!important;
}
.editor {
    padding: 10px;
}
</style>
